```vue
<template>
    <div class="site-topbar">
        <div class="container">
            <div id="J_miniCartTrigger" class="topbar-cart">
                <router-link to="/login" class="a" v-if="!isLoggedIn">登录</router-link>
                <router-link to="/addressAddressDetail" class="a" v-if="isLoggedIn">收货地址</router-link>
            </div>
            <div id="J_siteUserInfo" class="topbar-info">
                <router-link to="/login" class="a" v-if="!isLoggedIn">登录</router-link>
                <router-link to="/register" class="a" v-if="!isLoggedIn">注册</router-link>
                <router-link to="/coupon" class="a">优惠券</router-link>
            </div>
            <div id="J_globalSiteLinks" class="topbar-links">
                <router-link to="/cart" class="a" @click.native="jump('/cart')">
                    <span class="cart-icon">
                        <i class="iconfont-cart"></i><i class="iconfont-cart-full hide"></i>
                    </span>
                    购物车<span class="cart-mini-num">（{{ carNum }}）</span>
                </router-link>
                <router-link to="/Mycoupon" class="a" @click.native="jump('/Mycoupon')">
                    <span class="cart-icon">
                        <i class="iconfont-cart"></i><i class="iconfont-cart-full hide"></i>
                    </span>

                </router-link>
                <router-link to="/goods" class="a" @click.native="jump('/goods')">
                    <span class="cart-icon">
                        <i class="iconfont-cart"></i><i class="iconfont-cart-full hide"></i>
                    </span>
                    商品<span class="cart-mini-num">（{{ goodsNums }}）</span>
                </router-link>
                <router-link to="/order/Order" class="a" @click.native="jump('/order/Order')">查看订单</router-link>
                <div class="avatar-dropdown" v-if="isLoggedIn">
                    <el-dropdown trigger="click" placement="bottom" @command="handleCommand">
                        <span class="avatar-wrapper">
                            <el-avatar :size="40" :src="img" class="avatar" @error="handleAvatarError" />
                            <i class="el-icon-caret-bottom" />
                        </span>
                        <el-dropdown-menu slot="dropdown" class="custom-dropdown">
                            <el-dropdown-item command="userDetail">
                                <router-link to="/userDetail" class="menu-link">
                                    <em class="link-text">设置用户信息</em>
                                </router-link>
                            </el-dropdown-item>
                            <el-dropdown-item command="logout">
                                <span class="menu-link" @click="handleLogout">
                                    <em class="link-text">退出登录</em>
                                </span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="time-display">
                    <span>{{ currentTime }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getUser, getUserById } from '@/api/admin/User';
import { getById } from '@/api/user/user';

export default {
    name: 'SiteTopbar',
    data() {
        return {
            goodsNums: 0,
            carNum: 0,
            img: '',
            user: null,
            currentTime: '',
            couponCount: 0
        };
    },
    computed: {
        isLoggedIn() {
            return !!this.user;
        }
    },
    methods: {
        jump(path) {
            if (this.$route.path !== (path || '/home')) {
                this.$router.push(path).catch(err => { err });
            }
        },
        handleCommand(command) {
            if (command === 'userDetail') {
                this.jump('/userDetail');
            } else if (command === 'logout') {
                this.handleLogout();
            }
        },
        handleLogout() {
            this.$store.dispatch('user/logout').then(() => {
                this.user = null;
                this.img = '';
                this.carNum = 0;
                this.couponCount = 0;
                this.goodsNums = 0;
                this.$router.push('/login');
            });
        },
        handleAvatarError() {
            this.img = '/default-avatar.png';
        },
        async fetchUserData() {
            try {
                const userData = JSON.parse(getUser());
                const result = await getUserById(userData.id)
                this.user = result.data.data;
                console.log(this.user);
                this.img = this.user.headPicture || '/default-avatar.png';
                this.carNum = this.user.carNum || 0;
                this.couponCount = this.user.couponCount || 0;
                this.goodsNums = this.user.goodsNum || 0;
            } catch (error) {
                this.user = null;
                this.img = '/default-avatar.png';
                this.carNum = 0;
                this.couponCount = 0;
                this.goodsNums = 0;
            }
        },
        updateTime() {
            const now = new Date();
            this.currentTime = now.toLocaleTimeString('zh-CN', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            });
        }
    },
    mounted() {
        this.fetchUserData();
        this.updateTime();
        this.timer = setInterval(this.updateTime, 1000); // 每秒更新时间
    },
    created() {
        this.fetchUserData();
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); // 清理定时器
        }
    }
};
</script>

<style lang="less" scoped>
@topbar-bg: #333;
@text-color: wheat;
@link-spacing: 15px;
@avatar-size: 40px;
@hover-opacity: 0.7;
@time-color: lighten(wheat, 20%);

.site-topbar {
    position: relative;
    z-index: 30;
    height: 40px;
    font-size: 1rem;
    background: @topbar-bg;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    .container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        max-width: 1200px;
        margin: 0 auto;

        // 通用链接样式
        .a {
            color: @text-color;
            text-decoration: none;
            font-size: 0.9rem;
            transition: opacity 0.3s;
            white-space: nowrap;
            display: flex;
            align-items: center;

            &:hover {
                opacity: @hover-opacity;
            }

            &.menu-link {
                color: #606266;
                width: 100%;
                text-align: left;

                &:hover {
                    color: #409eff;
                }
            }
        }

        // 模块分组布局
        #J_miniCartTrigger,
        #J_siteUserInfo,
        .topbar-links {
            display: flex;
            align-items: center;
            height: 100%;
        }

        #J_siteUserInfo {
            .a:not(:last-child) {
                margin-right: @link-spacing;
            }
        }

        .topbar-links {
            .a {
                margin-left: @link-spacing;

                &:first-child {
                    margin-left: 0;
                }
            }

            .time-display {
                margin-left: @link-spacing;
                color: @time-color;
                font-size: 0.85rem;
                white-space: nowrap;
            }
        }

        // 头像下拉菜单
        .avatar-dropdown {
            margin-left: @link-spacing;

            :deep(.el-dropdown) {
                .avatar-wrapper {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 5px;
                    cursor: pointer;

                    .avatar {
                        transition: transform 0.3s;

                        &:hover {
                            transform: scale(1.1);
                        }
                    }

                    .el-icon-caret-bottom {
                        font-size: 0.75rem;
                        color: lighten(@topbar-bg, 40%);
                    }
                }

                .custom-dropdown {
                    min-width: 150px;
                    padding: 5px 0;
                    border-radius: 4px;
                    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

                    .el-dropdown-menu__item {
                        padding: 8px 20px;
                        font-size: 0.875rem;
                        transition: background-color 0.3s;

                        &:hover {
                            background-color: #f5f7fa;
                        }

                        i {
                            margin-right: 8px;
                        }
                    }
                }
            }
        }

        // 购物车图标特殊样式
        .cart-icon {
            display: flex;
            align-items: center;

            .iconfont-cart {
                font-size: 1rem;
                margin-right: 4px;

                &-full.hide {
                    display: none;
                }
            }
        }

        // 数字标签样式
        .cart-mini-num {
            margin-left: 4px;
            font-size: 0.8em;
            color: lighten(@text-color, 20%);
        }
    }
}

// 响应式调整
@media (max-width: 768px) {
    .site-topbar .container {
        padding: 0 10px;
        flex-direction: column;
        height: auto;

        #J_miniCartTrigger,
        #J_siteUserInfo,
        .topbar-links {
            width: 100%;
            justify-content: center;
            margin: 5px 0;
        }

        .a {
            margin: 0 8px;
            font-size: 0.8rem;
        }

        .avatar-dropdown {
            margin: 5px 0;
        }

        .time-display {
            margin: 5px 0;
        }
    }
}
</style>